<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="/js/My97DatePicker/WdatePicker.js"></script>
<script src="/js/jquery.Jcrop.js"></script>
<link rel="stylesheet" href="/css/jquery.Jcrop.css" type="text/css" />

	
<style type="text/css">
.jcrop-holder #preview-pane {
	border:2px solid red;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
	box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
}

#preview-pane .preview-container {
	width: 170px;
	height: 205px;
	overflow: hidden;
}

    body{
   	 font-family: 微软雅黑;
   	 margin:0 auto;
   	 background:#E8E8E8;
   	 text-align:center
    }

	#div_content{ 
		margin:10px auto; 
		width:1030px;  
		background:white;
		box-shadow:10px 10px 20px silver;
		text-align:center;
	} 
    
    #div_note{
      text-align: left;
      line-height: 10px;
      margin-left: 80px;
    }
    
    #table1, #table2, #table3{
		margin:auto;
    	width:850px;
    	border:1px solid black;
    	border-collapse:collapse;
    	font-size:14px;
    }
    
    #table1 input{
    	border:none;
		width:120px;	
    }
    
    td{ border:1px solid black;    }
   		
     #table1 tr td:nth-child(1),
     #table1  tr td:nth-child(3),
     #table1 tr td:nth-child(5)
      {
	 	width:110px;
	    text-align: right;
	    padding-right: 15px;
	    height: 30px;  
	    background:#8DB3E2;
	}
    
    .div_title{
      text-align: left;
      margin-left: 80px;
      font-size:22px;
      margin-bottom: 7px;
    }
    
    .div_title label{
    	 font-size:18px;
    }
    
     .div_title label span{
    	 color:red;
    }
    
    #table2 th, #table3 th{  
		border:1px solid black;
	    height: 30px;  
	    background:#8DB3E2;
    }
     #table2 input{
   		border:none;
		width:120px;
		height:30px;
    }
    
     #table3 input{
   		border:none;
		width:100px;
		height:30px;
    }
    
   
   input[type=submit], input[type=reset]{
    	float:right;
    	margin-right:205px;
    	border:0px;
    	font-size:16px;
        padding:5px;
    	font-weight:bold;
    	width:80px;	 
    }


   input[type=reset]{
   	 	margin-right:-190px;
	}
	
   input[type=radio]{
   		 width:45px;
	}

   #divOriginPhoto{	
		z-index: 2000;
		padding: 6px; 
		position:absolute;
		background-color: rgba(0, 0, 0, 0.6);
		width:88%;
		height:150%;
		padding-top: 20%px;
		padding-left: 20%;
   }
   
    #divCut {
  	 	display:none;
    }
    
    #div_phototitle{	
    	padding-top:2px;
    	text-align: left;
    	padding-left: 10px;
    	font-size: 12px;
    	color:blue;
    	font-weight: bold;
    }
    
     #div_phototitle button{	
    	border:0px;
    }
    
    
   	.msg{
   		color:red;
   		font-weight:bold
   		font-size:11px;
   	}

    </style>
<script>

	  var jcrop_api;

	  function setImagePreview(docObj, localImagId,localImag2,imgObjPreview,imgObjPreview2, width, height) {
		  $("#divCut").show();
		if (docObj.files && docObj.files[0]) { //火狐下，直接设img属性        
			imgObjPreview.style.display = 'block';
			imgObjPreview2.style.display = 'block';
			
		//	imgObjPreview.style.width = width;
		//	imgObjPreview.style.height = height;
		//  火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式        

			imgObjPreview.src =window.URL.createObjectURL(docObj.files[0]);
			imgObjPreview2.src = window.URL.createObjectURL(docObj.files[0]);

		
		} else { //IE下，使用滤镜      
			docObj.select();
			var imgSrc = document.selection.createRange().text;
			alert(imgSrc);
			//必须设置初始大小        
		//	localImagId.style.width = width;
		//	localImagId.style.height = height;
			//图片异常的捕捉，防止用户修改后缀来伪造图片        
			try {
				localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
				localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
				localImagId2.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
				localImagId2.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;	
			} catch (e) {
				alert("您上传的图片格式不正确，请重新选择!");
				return false;
			}
			imgObjPreview.style.display = 'none';
			imgObjPreview2.style.display = 'none';
			document.selection.empty();
		}
		
		initJcop();
	}
	 
	
	function initJcop(){
		var  boundx, boundy ;
		var $preview = $('#preview-pane'), $pcnt = $('#preview-pane .preview-container'), $pimg = $('#preview-pane .preview-container img');
		
		$preview = $('#preview-pane');
		$pcnt = $('#preview-pane .preview-container');
		$pimg = $('#preview-pane .preview-container img');


		$('#preview').Jcrop({
			allowResize:false,	
	//		aspectRatio : 1,
			onChange : showCoords,
			onSelect : showCoords,
			
		}, function() {
			
			var bounds = this.getBounds();
			boundx = bounds[0];
			boundy = bounds[1];

			jcrop_api = this;
			jcrop_api.setSelect([0, 0, 170, 205]);
		});
		
	}  

	
	function showCoords(obj) {
		$("#x").val(obj.x);
		$("#y").val(obj.y);
		$("#w").val(obj.w);
		$("#h").val(obj.h);
		if (parseInt(obj.w) > 0) {
			//计算预览区域图片缩放的比例，通过计算显示区域的宽度(与高度)与剪裁的宽度(与高度)之比得到 
			var rx = 200 / obj.w;
			var ry = 200 / obj.h;
			//通过比例值控制图片的样式与显示 
			$('#preview-pane .preview-container img').css({
				width : Math.round(rx * $("#preview").width()) + "px", //预览图片宽度为计算比例值与原图片宽度的乘积
				height : Math.round(ry * $("#preview").height()) + "px", //预览图片高度为计算比例值与原图片高度的乘积
				marginLeft : "-" + Math.round(rx * obj.x) + "px",
				marginTop : "-" + Math.round(ry * obj.y) + "px"
			});
		}
	}
	
	
	//点击重置按钮
	function resetpage(){
		if(confirm('确定要重置吗?')){
			window.location.href="/admin/student/student_add_word.jsp";
		}
		else{
			return false;
		}
	}
	
	//点击取消
	function resetPhoto()
	{
		$('#divCut').hide() ;
		
		if(jcrop_api){

		  jcrop_api.destroy();
		  jcrop_api=null;	 

		}
		$("#preview2").attr("src","");
	
		return false
	}
	
</script>
<title></title>
	
      
</head>
<body>
	<script>
		var msg="${msg}";
		if(msg!=""){
			alert(msg);
		}
	</script>

  <div id="divCut">
  	<div id="div_phototitle">
  		请拖动鼠标对图片的适合位置进行裁剪 &nbsp;&nbsp;
  		<img src="/images/check_right.gif"  onclick="$('#divCut').hide(); return false;" >
  		&nbsp;&nbsp;<img src="/images/check_error.gif" onclick="return resetPhoto()" >
  	</div>
		<div id="divOriginPhoto">
			<div id="localImag" style="margin-left: 24px" ></div>
	  		<img id="preview"   />
		
		</div>
  </div>
<div id="div_content">
		    	
<br />
<br />
<form action="/student/addWord" method="post" enctype="multipart/form-data">
		<input type="hidden"  id="x" name="x" /> 
		<input type="hidden"  id="y" name="y" /> 
		<input type="hidden"   id="w" name="w" /> 
		<input type="hidden"   id="h" name="h" />
			
<h2>附件一：学员信息表   </h2>
<div id="div_note">
<h4>填表说明</h4>
<h4>1.  请如实填写此表，保证填写数据的详实准确, 如有发现不实之处，一切后果由个人负责； </h4>
<h4>2.  数据一经录入无法在此界面进行修改, 在提交之前请认真确认。</h4>
</div>

<div class="div_title">
一、   基本信息     <label class="msg">  ${msg }</label>
	<input type="submit"  value="提交" onclick="return confirm('确定提交吗')">
	<input type="reset"   value="重置" onclick="return resetpage()">
</div>
	<input type="file" name="picture" id="btnPhoto" 
	style="display:none" id="picture"  onchange="setImagePreview(this,localImag,localImag2,preview,preview2, '100px','125px');"  />

	
		<table id="table1">
			<tr>
			 	<td>姓    名 </td> <td><input name="姓名"  value="${stu.姓名}" > </td>
			 	 <td>性    别 </td> 
			 	 <td> 
			 	 	男 <input style="width:14px"  type="radio" name="性别"  value="男"  <c:if test="${stu.性别=='男' }">checked</c:if> >  
			    	女 <input style="width:14px" type="radio" name="性别"  value="女"  <c:if test="${stu.性别=='女' }">checked</c:if>  >  
			 	 </td> 
			 	 
			 	 <td> 出生日期</td> 
			 	 <td><input onclick="WdatePicker()" name="出生日期"   value="<fmt:formatDate   value='${stu.出生日期}'  pattern='yyyy-MM-dd' />"  > </td>
			 	 
			 	 <td rowspan="6" onclick="$('#btnPhoto').click()">
					<div id="preview-pane">
						<div class="preview-container" id="localImag2" >
							<img   id="preview2" src="/student/photo?id=${stu.id }" class="jcrop-preview" title="点此上传图片" alt="点此上传图片" />
							
						</div>
					</div>
				</td>
			</tr>
			
			<tr>
				<td>年    龄</td>
				<td><input name="年龄"  value="${stu.年龄}" ></td>
				<td>最高学历</td>
				<td><input name="学历"  value="${stu.学历}" > </td>
				<td>民    族</td>
				<td><input name="民族"  value="${stu.民族}" ></td>
			</tr>
			<tr>
				<td>语    种</td>
				<td><input name="语种"  value="${stu.语种}" ></td>
				<td>外语水平</td>
				<td><input name="外语级别"  value="${stu.外语级别}" ></td>
				<td>籍    贯</td>
				<td><input name="籍贯"  value="${stu.籍贯}" ></td>
			
			</tr>
			<tr>
				<td>个人手机</td>
				<td><input name="电话"  value="${stu.电话}" ></td>
				<td>政治面貌</td>
				<td><input name="政治面貌"  value="${stu.政治面貌}" > </td>
				<td>QQ / 微信</td>
				<td><input name="QQ"  value="${stu.QQ}" ></td>
			
			</tr>
			<tr>
				<td>身份证号码	</td>
				<td colspan="3" ><input name="身份证号"  value="${stu.身份证号}"  style="width:95%" ></td>
				
				<td>邮箱</td>
				<td><input name="邮箱"  value="${stu.邮箱}" ></td>
				
			</tr>
			<tr>
				<td>毕业学校</td>
				<td colspan="3" ><input name="毕业学校"  value="${stu.毕业学校}" style="width:95%"></td>
			
				<td>毕业时间</td>
				<td><input onclick="WdatePicker()" name="毕业时间" style="width:95%"  value="<fmt:formatDate   value='${stu.毕业时间}'  pattern='yyyy-MM-dd' />" > </td>
			
			</tr>
			<tr>
				<td>户口所在地</td>
				<td colspan="3" ><input name="户口所在地"  value="${stu.户口所在地}" style="width:95%" ></td>
			
				<td>所学专业</td>
				<td colspan="2" ><input name="专业"  value="${stu.专业}" style="width:95%" > </td>
			
			</tr>		
			<tr>
				<td>爱好证书</td>
				<td colspan="3"  ><input name="家庭住址"  value="${stu.家庭住址}" style="width:95%"  ></td>
				<td>家庭住址</td>
				<td colspan="2" ><input name="其他证书"  value="${stu.其他证书}" style="width:95%" > </td>
			
			</tr>
		
		</table>
		<br />
	 	<div class="div_title">
			二、  家庭成员情况  <label>（<span>直系亲属</span> 两人以上）</label>
		</div>

	<table id="table2">
		<tr>
			<th>姓名</th> <th>与本人关系</th>  <th>工作单位</th>  <th>联系方式</th> 
		</tr>
		<tr>
		   <td> <input name="联系人一"  value="${stu.联系人一}" >  </td> 
		    <td><input name="联系人一与本人关系"  value="${stu.联系人一}" > </td>  
		    <td><input name="联系人一工作单位"  value="${stu.联系人一工作单位}" ></td>  
		    <td><input name="联系人一电话"  value="${stu.联系人一电话}" > </td> 
		</tr>
		<tr>
		   <td> <input name="联系人二"  value="${stu.联系人二}" >  </td> 
		    <td><input name="联系人二与本人关系"  value="${stu.联系人二}" > </td>  
		    <td><input name="联系人二工作单位"  value="${stu.联系人二工作单位}" ></td>  
		    <td><input name="联系人二电话"  value="${stu.联系人二电话}" > </td> 
		</tr>
	</table>

	<br />
	
	<div class="div_title">
		三、  教育及培训情况  <label>（<span>最终学历</span> 教育填起，包括来中心学习前所参加的技能培训情况）</label>
	</div>		

	<table id="table3">
			<tr>
				<th>时间起</th> <th>时间止</th>  <th width="23%">院校名称</th>  <th>专  业</th>    <th>学  历</th>    <th>获奖情况</th>  
			</tr>
			<tr>
			   <td> <input onclick="WdatePicker()" name="教育一时间起" value="<fmt:formatDate   value='${stu.教育一时间起}'  pattern='yyyy-MM-dd' />" >   </td> 
			   <td> <input onclick="WdatePicker()" name="教育一时间止" value="<fmt:formatDate   value='${stu.教育一时间止}'  pattern='yyyy-MM-dd' />" >   </td> 
			   <td> <input name="教育一院校名称" style="width:180px"  value="${stu.教育一院校名称}" >    </td> 
			   <td> <input name="教育一专业" value="${stu.教育一专业}" />  </td> 
			   <td> <input name="教育一学历" value="${stu.教育一学历}" />  </td> 
			   <td> <input name="教育一获奖情况" value="${stu.教育一获奖情况}" />  </td> 
			</tr>
			<tr>
			   <td> <input onclick="WdatePicker()" name="教育二时间起" value="<fmt:formatDate   value='${stu.教育二时间起}'  pattern='yyyy-MM-dd' />" >    </td> 
			   <td> <input onclick="WdatePicker()" name="教育二时间止" value="<fmt:formatDate   value='${stu.教育二时间止}'  pattern='yyyy-MM-dd' />" >   </td> 
			   <td> <input name="教育二院校名称" style="width:180px"  value="${stu.教育二院校名称}" >   </td> 
			   <td> <input name="教育二专业" value="${stu.教育二专业}" />  </td> 
			   <td> <input name="教育二学历" value="${stu.教育二学历}" />  </td> 
			   <td> <input name="教育二获奖情况" value="${stu.教育二获奖情况}" />  </td> 
			</tr>
		</table>

	<br />
	<div class="div_title">
	四、  身份证及户口复印件
	</div>
	
	<br />
	<div class="div_title">
	五、  学历证复印件（包括毕业证及学位证）
	</div>
	<br /><br /><br /><br />
	

	</form>	
 </div>
</body>
</html>

